<template>
  <div class="search">
    <el-input
      class="search-input no-border"
      :placeholder="props.placeholder"
      :size="props.size"
      v-model="searchVal"
      clearable
      :disabled="isDisabled"
      @keydown.enter="
        handlerSearch();
        isDisabled = true;
      "
    >
      <template #prefix>
        <i
          class="iconfont icon-sousuo"
          @click="
            handlerSearch();
            isDisabled = true;
          "
        ></i>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref, defineEmits, watch } from "vue";
import _ from "lodash";

const props = defineProps({
  placeholder: {
    type: String,
    default: "搜索",
  },
  size: {
    type: String,
    default: "small",
  },
  searchVal: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["search"]);
const searchVal = ref(props.searchVal);
const isDisabled = ref(false);

watch(
  () => searchVal.value,
  (v) => {
    if (v.length === 0) {
      handlerSearch();
    }
  }
);

//搜索函数
const handlerSearch = _.debounce(
  () => {
    emit("search", searchVal.value);
    isDisabled.value = false;
  },
  200,
  {
    leading: false,
  }
);
</script>

<style lang="less" scoped>
.icon-sousuo {
  cursor: pointer;
}
</style>
